<template>
	<view class="content">
		<view class="me_liucheng b">
			<view class="liucheng_me padding-lr">
				<view class="liucheng_me_a">订单编号:{{ data.number }}</view>
				<view class="liucheng_me_b">负责人：{{ data.head }}</view>
			</view>
			<view class="liucheng_center">
				<view
					class="renyuan"
					v-for="(itme, index) in data.staff"
					:key="index"
					@longpress="delEe(itme.id)"
				>
					<image :src="itme.picture" v-if="itme.picture" mode=""></image>
					<image v-else mode="" class="bg-gradual-red"></image>
					<p>{{ itme.nickname ? itme.nickname : '...' }}</p>
					<p>{{ itme.position ? itme.position : '...' }}</p>
				</view>
			</view>
			<view class="liucheng_bott padding-lr">
				<view class="liucheng_bott_a">当前流程: {{ data.process }}</view>
				<u-popup v-model="whetherToAdd" mode="center" border-radius="14">
					<view class="padding b add ">
						<view
							class="b"
							v-for="(item, index) in eeLst"
							:key="index"
							@click="addEee(item.id)"
							style="margin-bottom: 15rpx; padding: 5rpx; display: flex; justify-content: space-around; width: 80vw; background-color: #F5F8FD;"
						>
							<image
								:src="item.picture"
								mode=""
								style="width: 80rpx; height: 80rpx;"
							></image>
							<view
								class=""
								style="display: flex; flex-direction: column; justify-content: space-around;"
							>
								<text>{{ item.nickname }}</text>
								<text>{{ item.position ? item.position : '' }}</text>
							</view>
						</view>
					</view>
				</u-popup>
				<view class="liucheng_bott_b" @click="addEe">添加员工（长按删除）</view>
			</view>
		</view>

		<view class="info shadow padding">
			<u-picker v-model="showTime" mode="time" @confirm="confirm1"></u-picker>
			<block v-for="(i, index) in data.input" :key="index">
				<!-- 输入框 -->
				<view class="info2" v-if="i.genre == 1">
					<text>{{ i.title }}</text>
					<input
						type="text"
						v-model="i.inptBox"
						placeholder="请输入 "
						class="inputStyle"
						@blur="ddd"
					/>
				</view>

				<!-- 时间 -->

				<view class="info1" @click="showTimee(index)" v-if="i.genre == 3">
					<text>{{ i.title }}</text>

					<input
						type="text"
						v-model="i.time"
						value=""
						placeholder="请选择时间"
						class="inputStyle"
					/>
				</view>

				<!-- 单选 -->
				<view class="info2 " style="height: auto;" v-if="i.genre == 4">
					<text>{{ i.title }}</text>
					<u-radio-group
						v-model="i.singleChoice"
						@change="radioGroupChange"
						wrap
						class="padding-tb-xs padding-lr-sm"
					>
						<u-radio
							shape="square"
							active-color="#FF1A14"
							v-for="(ii, index1) in i.genre_note"
							:key="index1"
							:name="ii"
							:disabled="ii.disabled"
						>
							{{ ii }}
						</u-radio>
					</u-radio-group>
				</view>

				<!-- 多选 -->
				<view class="info2" style="height: auto;" v-if="i.genre == 5">
					<text>{{ i.title }}</text>

					<u-checkbox-group
						v-model="i.multChoice"
						@change="checkboxGroupChange(i, index)"
						data-id="index"
						wrap
						class="padding-tb-xs padding-lr-sm"
					>
						<u-checkbox
							v-model="ii.checked"
							v-for="(ii, index2) in i.genre_note"
							shape="square"
							active-color="#FF1A14"
							:key="index2"
							:name="ii.name"
						>
							{{ ii.name }}
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<!-- 上传 -->
				<view class="inff " style="height: atuo;" v-if="i.genre == 2">
					<text>{{ i.title }}</text>
					<u-upload
						ref="uUpload"
						:action="action"
						:auto-upload="true"
						@on-success="success(index)"
						@on-uploaded="uploaded"
						width="190rpx"
						height="190rpx"
						multiple
						:file-list="i.fileList"
					></u-upload>
				</view>
			</block>
		</view>

		<u-action-sheet :list="list" @click="click" v-model="show_a"></u-action-sheet>
		
		<u-modal v-model="sss" content="是否进入下一步 !" @confirm='submit11'></u-modal>
		
		
		<u-popup v-model="sss1111" mode="center" border-radius="14" width="70%">
			<view class="padding">
				<text class="cuIcon-title text-red text-bold">未提交的的员工 : </text>
				<view class="padding-xs margin-top f j-b r b padding-right" style="background-color: #F5F5F5;" v-for="(item,index) in nxtStpData.user_info" :key="index">
					<view class="cu-avatar round">
						<image :src="item.picture" mode=""  style="width: 90rpx; height: 90rpx;"></image>
					</view>
					<view class="" style="display: flex; flex-direction: column; justify-content: space-around;" >
						<text>{{itme.nickname ? itme.nickname :'...' }}</text>
						<text>{{itme.position ? itme.position :'...' }}</text>
					</view>
					
				</view>
				<button  v-if="eid != 0" class="margin-top cu-btn black response text-bold text-black" @click="nxtStp">进入下一步历程</button>
				<button  v-else class="margin-top cu-btn black response text-bold text-red" @click="enterTheEnd">进入结束历程</button>
			</view>
		</u-popup>

		<view class="tijiao_yangshi">
			<view class="tijiao_yangshi_a" @click="submit">确认内容并提交</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sss1111:false,
			sss: false,
			action: 'https://wumei.qianjitianxia.com/api/upload/upload',
			whetherToAdd: false,
			show_a: false,
			eeLst: [],
			lc_id: '', // 流程订单id
			eid: '', // 流程id
			data: {},
			explain: [],
			showTime: false,
			params: {
				year: true,
				month: true,
				day: true,
				hour: false,
				minute: false,
				second: false,
			},
			timeIndex: '', // 时间唯一性
			imageIndex: '', // 图片唯一性
			image: [],
			// 单选

			value: 'orange',
			flg: true,
			nxtStpData:{}
			//multSelectionLst:''
			// 多选
		};
	},
	onLoad(e) {
		console.log('e :>> ', e);
		e && (this.lc_id = e.lc_id);
		this.getEmployees();
		this.processManagement(e.lc_id);
		
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#ff0000',
			animation: {
				duration: 400,
				timingFunc: 'easeIn',
			},
		});
		setTimeout(() => {
			this.submit11()
		}, 5000);
	},

	methods: {
		async enterTheEnd(){
			 let obj = {
			     uid: uni.getStorageSync("uid"),
				 lc_id:this.lc_id
			 };
			 const res = await this.$u.post("api/user/end_process",obj,{});
			uni.$showMsg(res.msg) 
			this.sss1111 = false
			this.processManagement(this.lc_id)
			console.log("res >>  ", res);
			 
		},
		async nxtStp(){
			let obj = {
			    uid: uni.getStorageSync("uid"),
				lc_id:this.lc_id,
				eid:this.eid
			};
			const res = await this.$u.post("api/user/next_step_click",obj,{});
			uni.$showMsg(res.msg) 
			this.sss1111 = false
			console.log("res >>  ", res);
			
		},
		async submit11(){
			let obj = {
			   uid: uni.getStorageSync('uid'),
			   lc_id: this.lc_id,
			   eid: this.eid,
			};
			const res = await this.$u.post("api/user/next_step",obj,{});
			if (!res.code) return uni.$showMsg(res.msg);
			this.nxtStpData = res.data;
			this.eid = res.data.eid
			console.log("this.nxtStpData >>  ", this.nxtStpData);
			
			
			
			
			setTimeout(() => {
				this.sss1111 = true
			}, 500);
		},
		/* 上传 */
		uploaded(lists, name) {
			let image = [];
			lists.forEach(item => {
				image.push(item.response.url);
			});
			this.data.input[this.imageIndex].image = image.join(',');
			image = [];
		},
		success(i) {
			this.imageIndex = i;
		},
		ddd() {
			console.log('this.data :>> ', this.data);
		},
		confirm1(e) {
			this.data.input[this.timeIndex].time = `${e.year}-${e.month}-${e.day}`;

			console.log('this.data :>> ', this.data);
		},
		/* 多选 */
		checkboxGroupChange(e, i) {
			var x = [];
			e.genre_note.forEach(Item => {
				if (Item.checked == true) {
					x.push(Item.name);
				}
			});

			this.data.input[i].multChoice = x.join(',');
		},
		/* 单选 */
		radioGroupChange(e) {
			console.log('e 单选 :>> ', e);
		},
		showTimee(i) {
			console.log('i :>> ', i);
			this.showTime = true;
			this.timeIndex = i;
		},
		async submit() {
			var explain = [];
			this.data.input.forEach((item, index) => {
				if (item.genre == 1) {
					if (!item.inptBox) {
						this.flg = false;
						return uni.$showMsg('不能为空,请重新选择 ! ');
					} else {
						this.flg = true;
						explain.push([{ step: item.step }, { content: item.inptBox }]);
					}
				} else if (item.genre == 3) {
					if (!item.time) {
						this.flg = false;
						return uni.$showMsg('不能为空,请重新选择 ! ');
					} else {
						this.flg = true;
						explain.push([{ step: item.step }, { content: item.time }]);
					}
				} else if (item.genre == 2) {
					if (!item.image) {
						this.flg = false;
						return uni.$showMsg('不能为空,请重新选择 ! ');
					} else {
						this.flg = true;
						explain.push([{ step: item.step }, { content: item.image }]);
					}
				} else if (item.genre == 4) {
					if (!item.singleChoice) {
						this.flg = false;

						return uni.$showMsg('不能为空,请重新选择 ! ');
					} else {
						this.flg = true;
						explain.push([{ step: item.step }, { content: item.singleChoice }]);
					}
				} else if (item.genre == 5) {
					if (!item.multChoice) {
						this.flg = false;

						return uni.$showMsg('不能为空,请重新选择 ! ');
					} else {
						this.flg = true;
						explain.push([{ step: item.step }, { content: item.multChoice }]);
					}
				}
			});

			console.log('explain :>> ', explain);
			console.log('this.flg :>> ', this.flg);
			if (this.flg) {
				let obj = {
					uid: uni.getStorageSync('uid'),
					lc_id: this.lc_id,
					eid: this.eid,
					explain: explain,
				};

				if (this.data.hid == uni.getStorageSync('uid')) {
					const res = await this.$u.post('api/user/user_step_add', obj, {});
					//uni.$showMsg(res.msg);
					var _this = this
					if (res.msg == '提交成功') {
						console.log('1111111111 :>> ', 1111111111);
						_this.sss = true;
					}
				} else {
					const res = await this.$u.post('api/user/user_staff_add', obj, {});
					uni.$showMsg(res.msg);
				}
			}
		},
		async processManagement(lc_id) {
			let obj = {
				lc_id,
			};
			const res = await this.$u.post('api/user/user_step', obj, {});
			this.eid = res.data.eid;
			this.data = res.data;
			console.log('流程管理 >>  ', res);
		},
		async getEmployees() {
			let obj = {
				uid: uni.getStorageSync('uid'),
			};
			const res = await this.$u.post('api/user/employees', obj, {});
			this.eeLst = res.data;
			console.log('获取员工列表 >>  ', res);
		},
		addEe() {
			this.whetherToAdd = true;
		},
		async delEe(id) {
			let obj = {
				uid: id,
				lc_id: this.lc_id,
				eid: this.eid,
			};
			const res = await this.$u.post('api/user/delete_employees', obj, {});
			if (res.code == 1) {
				uni.$showMsg(res.msg);
				this.processManagement(this.lc_id);
			}
		},
		async addEee(uid) {
			let obj = {
				uid,
				lc_id: this.lc_id,
				eid: this.eid,
			};
			const res = await this.$u.post('api/user/insert_employees', obj, {});
			if (res.code == 1) {
				uni.$showMsg(res.msg);
				this.processManagement(this.lc_id);
				this.whetherToAdd = false;
			}
			console.log('添加员工 >>  ', res);
		},

		click(index) {
			console.log(`点击了第${index + 1}项，内容为：${this.list[index].text}`);
		},
		xuanxiang() {
			this.show_a = true;
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	height: 100%;
	margin-bottom: 200rpx;
	background-color: #f5f8fd;
}
.shop {
	width: 690rpx;
	// height: 282rpx;
	margin: 0 auto;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(51, 51, 51, 0.1);
	border-radius: 20rpx;
	padding: 31rpx;
	margin-top: 20rpx;
	text {
		font-size: 36rpx;
		font-family: 'Microsoft YaHei', PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	text:before {
		content: '*';
		color: #ff0000;
	}
}
.info {
	margin: 0 auto;
	margin-top: 20rpx;
	width: 690rpx;
	// height: 450rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(51, 51, 51, 0.1);
	border-radius: 20rpx;

	.verificationCd {
		position: relative;
		.countdown {
			position: absolute;

			right: 50rpx;

			width: 110rpx;
			height: 60rpx;
			border-radius: 35rpx;
			//background-color: #007aff;
		}
	}

	.info1,
	.info2,
	.info3,
	.info4,
	.info5 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-top: 20rpx;
		height: 120rpx;

		border-bottom: 2rpx solid #f1eded;

		text {
			font-size: 36rpx;
			font-family: 'Microsoft YaHei', PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		text:before {
			content: '*';
			color: #ff0000;
		}
		input {
			padding-left: 20rpx;
		}
		.inputStyle {
			font-size: 30rpx;
			font-family: 'Microsoft YaHei', PingFang SC;
			font-weight: 400;
			color: #999999;
			margin-top: 10rpx;
		}
	}
	.inff {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 20rpx 0;
		border-bottom: 2rpx solid #f1eded;
		text {
			font-size: 36rpx;
			font-family: 'Microsoft YaHei', PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		text:before {
			content: '*';
			color: #ff0000;
		}

		.inputStyle {
			font-size: 30rpx;
			font-family: 'Microsoft YaHei', PingFang SC;
			font-weight: 400;
			color: #999999;
			margin-top: 10rpx;
		}
	}
}
.me_liucheng {
	width: 690rpx;
	margin: auto;
	height: 100%;
	background-color: #ffffff;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	border-radius: 20rpx;
	.liucheng_me {
		width: 100%;
		height: 80rpx;
		border-bottom: 1rpx solid #f5f8fd;
		//padding-top: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.liucheng_me_a {
			height: 23rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 30rpx;
		}
		.liucheng_me_b {
			width: 166rpx;
			height: 23rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ff1a14;
			line-height: 30rpx;
		}
	}
	.liucheng_center {
		width: 100%;
		height: 100%;

		border-bottom: 1rpx solid #f5f8fd;
		display: flex;

		flex-wrap: wrap;
		.renyuan {
			padding-top: 10rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			width: 170rpx;
			height: 170rpx;

			image {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				margin-bottom: 10rpx;
			}
			p {
				width: 120rpx;
				height: 31rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 14rpx;
				text-align: center;
			}
		}
	}
	.liucheng_bott {
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.liucheng_bott_a {
			width: 300rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ff1a14;
			text-align: left;
			.add {
			}
		}
		.liucheng_bott_b {
			width: 255rpx;
			height: 46rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			background-color: #ff1a14;
			font-size: 24rpx;

			color: #ffffff;

			border-radius: 10rpx;
		}
	}
}
.biaodan {
	width: 690rpx;
	margin: auto;
	height: 100%;
	background-color: #ffffff;
	border-radius: 10rpx;
	margin-bottom: 145rpx;
	position: relative;
	.biaodan_a {
		width: 630rpx;
		margin: auto;
		height: 132rpx;
		border-bottom: 1rpx solid #999999;
		.biaodan_top {
			font-size: 36rpx;
			padding-top: 20rpx;
			span {
				color: #ff0000;
			}
		}
		input {
			font-size: 30rpx;
		}
		.biaodan_cen {
			color: #999999;
			font-size: 30rpx;
			margin-top: 15rpx;
		}
	}
	.fudong {
		position: absolute;
		width: 80rpx;
		height: 28rpx;
		top: 30rpx;
		left: 550rpx;
		display: flex;
		justify-content: space-between;
		image {
			width: 28rpx;
			height: 28rpx;
		}
	}
}

.tijiao_yangshi {
	width: 100%;
	height: 140rpx;
	position: fixed;
	background-color: #ffffff;
	bottom: 0rpx;
	z-index: 999;
	.tijiao_yangshi_a {
		width: 690rpx;
		margin: auto;
		height: 100rpx;
		background-color: #ff1a14;
		border-radius: 50rpx;
		margin-top: 20rpx;
		color: #ffffff;
		text-align: center;
		line-height: 100rpx;
		font-size: 36rpx;
	}
}
</style>
